<!-- ${comment} -->
<template>
  <div class="container">
    <!-- 检索区域 -->
    <div class="query-form">
      <el-button class="align-right" type="primary" @click="drawerVisible = true" icon="el-icon-plus">新增</el-button>
    </div>

    <!-- 表格区域 -->
    <div class="table-wrapper">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        style="width: 100%">
        <#list columns as column>
          <#if (column.attrName == "valid" || column.attrName == "createBy" || column.attrName == "updateBy")>
          <#else>
        <el-table-column prop="${column.attrName}" label="${column.columnComment}" width="140"></el-table-column>
          </#if>
        </#list>
        <el-table-column fixed="right" label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="queryForm.pageNum"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="queryForm.pageSize"
        :total="total">
      </el-pagination>
    </div>

    <!-- 新增或编辑 -->
    <el-drawer title :with-header="false" :visible.sync="drawerVisible" size="500px" :wrapperClosable="false">
      <div class="form-wrapper">
        <p class="popUp-title">{{ form.id ? '编辑数据' : '新增数据' }}</p>
        <div>
          <el-form class="form" :model="form" ref="form" :rules="rules" label-width="90px">
          <#list columns as column>
            <#if (column.attrName == "id" || column.attrName == "valid" || column.attrName == "createBy" || column.attrName == "updateBy" || column.attrName == "createAt" || column.attrName == "createTime" || column.attrName == "updateAt" || column.attrName == "updateTime")>
            <#else>
            <el-form-item label="${column.columnComment}" prop="${column.attrName}">
              <el-input type="text" v-model="form.${column.attrName}" <#if (column.characterMaximumLength??)> maxlength="${column.characterMaximumLength!'15'}" show-word-limit</#if>></el-input>
            </el-form-item>
            </#if>
          </#list>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="handleResetForm()">取消</el-button>
            <el-button type="primary" :loading="submitLoading" @click="handleSubmitForm()">确定</el-button>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: '${className}',
  data() {
    return {
      tableLoading: false,
      tableData: [], // 列表的数据
      total: 0, // 总条数
      queryForm: { // 查询参数表单
        pageNum: 1,
        pageSize: 10
      },
      drawerVisible: false,
      submitLoading: false,
      form: {
      <#list columns as column>
        <#if (column.attrName == "valid" || column.attrName == "createAt" || column.attrName == "createTime" || column.attrName == "createBy" || column.attrName == "updateAt" || column.attrName == "updateTime" || column.attrName == "updateBy")>
        <#else>
        ${column.attrName}: null<#if column_has_next>,</#if> // ${column.columnComment}
        </#if>
      </#list>
      },
      rules: {
      <#list columns as column>
        <#if (column.attrName == "id" || column.attrName == "valid" || column.attrName == "createAt" || column.attrName == "createTime" || column.attrName == "createBy" || column.attrName == "updateAt" || column.attrName == "updateTime" || column.attrName == "updateBy")>
        <#else>
        ${column.attrName}: [
          { required: ${column.required?string("true","false")}, message: '请输入${column.columnComment}', trigger: 'blur' }
        ]<#if column_has_next>,</#if>
        </#if>
      </#list>
      }
    }
  },
  // 引用组件
  components: {},
  // 生命周期 - 创建完成
  created() {
    this._getList()
  },
  // 相关方法
  methods: {
    // 获取列表数据(分页)
    _getList() {
      this.tableLoading = true
      this.$http.get('${apiPrefix}/${className?uncap_first}/getList', this.queryForm).then(res => {
        this.tableData = res.data
        this.total = res.total
      }).finally(() => {
        this.tableLoading = false
      })
    },
    // 查询
    query() {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = 10
      this._getList()
    },
    // 分页处理
    handlePageSizeChange(pageSize) {
      this.queryForm.pageSize = pageSize
      this._getList()
    },
    // 分页处理
    handleCurrentChange(pageNum) {
      this.queryForm.pageNum = pageNum
      this._getList()
    },
    // 提交表单
    handleSubmitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          if (this.form.id) {
            this.$http.put('${apiPrefix}/${className?uncap_first}/modify', this.form).then(res => {
              console.log(res)
              this.query()
              this.handleResetForm()
            }).finally(() => {
              this.submitLoading = false
            })
          } else {
            this.$http.post('${apiPrefix}/${className?uncap_first}/add', this.form).then(res => {
              console.log(res)
              this.query()
              this.handleResetForm()
            }).finally(() => {
              this.submitLoading = false
            })
          }
        }
      })
    },
    // 编辑信息
    handleEdit(row) {
      this.form = {
        <#list columns as column>
          <#if (column.attrName == "valid" || column.attrName == "createAt" || column.attrName == "createTime" || column.attrName == "createBy" || column.attrName == "updateAt" || column.attrName == "updateTime" || column.attrName == "updateBy")>
          <#else>
        ${column.attrName}: row.${column.attrName}<#if column_has_next>,</#if> // ${column.columnComment}
          </#if>
        </#list>
      }
      this.drawerVisible = true
    },
    // 重置表单数据
    handleResetForm() {
      this.form = {
        <#list columns as column>
          <#if (column.attrName == "valid" || column.attrName == "createAt" || column.attrName == "createTime" || column.attrName == "createBy" || column.attrName == "updateAt" || column.attrName == "updateTime" || column.attrName == "updateBy")>
          <#else>
        ${column.attrName}: <#if (column.attrType == "String")>''<#else>${r'null'}</#if><#if column_has_next>,</#if> // ${column.columnComment}
          </#if>
        </#list>
      }
      this.drawerVisible = false
    },
    // 删除操作
    handleDelete(row) {
      this.$confirm('此操作将删除数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
        <#list pkColumns as column>
          ${column.attrName}: row.${column.attrName}<#if column_has_next>,</#if>
        </#list>
        }
        this.$http.delete('${apiPrefix}/${className?uncap_first}/delete', params).then(() => {
          this.$message.success('删除成功')
          this._getList()
        })
      }).catch(() => {
      })
    }
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // 生命周期 - 创建之前
  beforeCreate() {},
  // 生命周期 - 挂载之前
  beforeMount() {},
  // 生命周期 - 更新页面之前
  beforeUpdate() {},
  // 生命周期 - 更新页面之后
  updated() {},
  // 生命周期 - 页面销毁之前
  beforeDestroy() {},
  // 生命周期 - 页面销毁之后
  destroyed() {}
}
</script>

<style lang="stylus" scoped>
/* @import url(); 引入css类 */
.container
  .query-form
    ${r'margin-bottom 10px'}
    background-color #ffffff
    .align-right
      float right
  .table-wrapper
    background-color #ffffff
  .form-wrapper
    ${r'padding 10px'}
</style>
